<template>
  <div>
    <div class="forget-title">忘记密码</div>
    <div class="dinput">
      <input
        type="phone"
        maxlength="11"
        v-model="phone"
        placeholder="请输入手机号码"
      />
    </div>
    <div class="dinput">
      <input
        type="number"
        maxlength="8"
        v-model="sms"
        placeholder="请输入验证码"
      />
      <span @click="smsClick">{{ smsText }}</span>
    </div>
    <div class="dinput">
      <input
        :type="isinputType ? 'password' : 'text'"
        placeholder="请输入密码"
        v-model="password"
      />
      <img
        :src="isinputType ? closeEyes : openEyes"
        width="17"
        height="17"
        @click="isPwdClick"
      />
    </div>
    <div class="dinput">
      <input
        :type="isinputType1 ? 'password' : 'text'"
        placeholder="请再次输入密码"
        v-model="password1"
      />
      <img
        :src="isinputType1 ? closeEyes : openEyes"
        width="17"
        height="17"
        @click="isPwdClick1"
      />
    </div>

    <div class="forget-save" @click="nextClick">保存</div>
    <div class="login" @click="close">登录</div>
  </div>
</template>
<script>
import { getApiSms, getApiForgetPassword } from "network/ApiServe";
export default {
  name: "ForgetPassword",
  data() {
    return {
      phone: "",
      sms: "",
      password: "",
      password1: "",
      smsText: "获取验证码",
      isinputType: true,
      isinputType1: true,
      closeEyes: require("assets/image/icon_close_your_eyes.png"),
      openEyes: require("assets/image/icon_open_your_eyes.png"),
    };
  },
  methods: {
    isPwdClick() {
      this.isinputType = !this.isinputType;
    },
    isPwdClick1() {
      this.isinputType1 = !this.isinputType1;
    },
    smsClick() {
      if (this.phone.length != 11) {
        return this.$toast("手机号码不正确");
      }
      let timeSS = 61;
      let clearTime = setInterval(() => {
        timeSS--;
        if (timeSS == 0) {
          clearInterval(clearTime);
          this.smsText = "获取验证码";
          return;
        }
        this.smsText = timeSS + "s";
      }, 1000);
      getApiSms(this.phone.trim())
        .then((res) => {
          this.$toast(res.resp_message);
        })
        .catch((err) => {
          console.log(err, "getApiSms");
        });
    },
    close() {
      this.$router.back(-1);
    },
    nextClick() {
      if (this.phone.length != 11) {
        console.log(this.phone.trim());
        return this.$toast("手机号码不能为空或者手机格式不正确");
      }
      if (this.sms.length == 0) {
        return this.$toast("验证码不能为空");
      }
      if (this.password.length == 0) {
        return this.$toast("密码不能为空");
      }
      if (this.password1.length == 0) {
        return this.$toast("再次输入不能为空");
      }
      if (this.password != this.password1) {
        return this.$toast("两次密码不一致");
      }
      getApiForgetPassword(this.phone, this.sms, this.password)
        .then((res) => {
          console.log(res, "getApiForgetPassword");
          this.$toast(res.resp_message);
          if (res.resp_code === "000000") {
            this.$router.back(-1);
          }
        })
        .catch((err) => {
          console.log(err, "getApiForgetPassword");
        });
    },
  },
};
</script>
<style scoped>
.forget-title {
  margin-top: 51px;
  padding-bottom: 16px;
  text-align: center;
  font-size: 24px;
  color: var(--app-color-3);
  font-weight: 500;
}
.dinput {
  margin-top: 21px;
  height: 44px;
  display: flex;
  padding-left: 15px;
  padding-right: 15px;
  border: 1px solid #dde1e6;
  border-radius: 22px;
  margin-left: 37px;
  margin-right: 38px;

  align-items: center;
  color: #444;
  font-size: 14px;
}
.dinput input {
  outline: none;
  border: 0px;
  flex: 1;
  background-color: #f7f7f7;
}
.dinput span {
  margin-left: 10px;
}
.forget-save {
  margin-left: 37px;
  margin-right: 28px;
  margin-top: 47px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #fff;
  background-color: var(--app-primary-theme-color);
  border-radius: 22px;
}
.login {
  margin-top: 15px;
  text-align: center;
  font-size: 13px;
  color: #666;
}
</style>